{% extends "base.html" %}
{% block title %}Settings - API{% endblock title %}
{% block ngapp %}BaseModule{% endblock ngapp %}
{% block content_class %}class="data-rows"{% endblock content_class %}
{% block breadcrumb %}
    {% include "settings/_topbar.html" %}
{% endblock breadcrumb %}
{% block main_content_class %}center{% endblock main_content_class %}
{% block content %}
<form method="post" action="{% url 'settings_api' %}">
<div class="settings__content">

<ul class="settings-list-form">
    {{ form.as_ul }}

<li class='buttons'>
    {% csrf_token %}
    <input type="submit" class='button' value="Create" />

</li>
</ul>

</div><!-- profile content -->

</form>
{% if api_keys.clone.count > 0 %} 
<table class='settingsapikeys-table'>
    <thead>
        <tr>
            <th class='name'>Key</th>
            <th class='label'>Label</th>
            <th class='last_used'>Last Used</th>
            <th class='settings'> <a href="{% url 'api_history' %}">API Calls History</a></th>
        </tr>
    </thead>

    {% for m in api_keys %}
    <tr id="row-{{ m|mongo_id }}">
        <td>{{ m.key }}</td>
        <td>{{ m.label }}</td>
        <td>{% if m.last_used %}{{ m.last_used | datetime_local }}{% else %}Never {% endif %}</td>

        <td class='settings-column'>
            <a title='Delete' class='delete_row button delete' data-rowid="{{ m|mongo_id }}" href="#" data-icon="b" ></a>
        </td>

    </tr>
    <div class="delete-row" id="delete-row-{{ m|mongo_id }}">
        <p>Are you sure you want to delete this key ?</p>
        <ul>
            <li><a href="{% url 'settings_api_delete_key' key_id=m|mongo_id %}" class="button delete">Delete</a></li>
            <li><a data-rowid="{{ m|mongo_id }}" href="" class="button cancel cancel_delete">Cancel</a></li>
        </ul>
    </div>
    {% endfor %}
</table>
{% endif %}
{% endblock %}
{% block js %}
    <script type="text/javascript" src='{{ STATIC_URL }}js/delete.row.js'></script>
{% endblock js %}
